<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel="stylesheet" href="./chat.css">

</head>
<body>
<div class="wrapper">
    <div class="container">
        <!-- 左侧列表 -->
        <div class="left">
            <div class="top">
                <p>聊天列表</p>
            </div>
            <!-- 聊天对象列表 -->
            <ul class="people">

                <li class="person" data-chat="person2">
                    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/382994/dog.png" alt=""/>
                    <span class="name">Dog Woofson</span>
                </li>

            </ul>
        </div>
        <!-- 聊天框 -->
        <div class="right">
            <div class="top"><span>To: <span class="name">Dog Woofson</span></span></div>

            <div id="chat-person2" class="chat" data-chat="person2">
                <!-- 聊天内容 -->
                <div class="conversation-start">
                    <span>Today, 5:38 PM</span>
                </div>
                <!-- 接收方-->
                <div class="bubble you">
                    Hello, can you hear me?
                </div>
                <div class="bubble you">
                    I'm in California dreaming
                </div>
                <!-- 发送方-->
                <div class="bubble me">
                    ... about who we used to be.
                </div>
                <div class="bubble me">
                    Are you serious?
                </div>
                <div class="bubble you">
                    When we were younger and free...
                </div>
                <div class="bubble you">
                    I've forgotten how it felt before
                </div>
            </div>

            <div class="write">
                <a href="javascript:;" class="write-link attach"></a>
                <input id="currInput" type="text" name="content"/>
                <a href="javascript:;" class="write-link smiley"></a>
                <a href="javascript:sendMsg();" class="write-link send"></a>
            </div>
        </div>
    </div>
</div>
<!-- partial -->
<script src="./chat.js"></script>

</body>
</html>
